'use client'

import { useState } from 'react'

export default function CTASection() {
  const [formData, setFormData] = useState({
    name: '',
    company: '',
    phone: '',
    email: '',
    message: ''
  })

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData(prev => ({
      ...prev,
      [name]: value
    }))
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // 这里处理表单提交逻辑
    console.log('Form submitted:', formData)
    alert('感谢您的咨询，我们将尽快与您联系！')
  }

  return (
    <section id="contact" className="py-12 sm:py-16 lg:py-20 bg-black text-white relative overflow-hidden">
      {/* 背景装饰 */}
      <div className="absolute inset-0">
        <div className="grid-pattern opacity-20"></div>
        <div className="absolute top-10 left-10 w-24 h-24 sm:w-32 sm:h-32 border-4 border-blue-600 transform rotate-45 animate-spin-slow"></div>
        <div className="absolute bottom-10 right-10 w-16 h-16 sm:w-24 sm:h-24 bg-green-400 transform rotate-12 animate-pulse-slow"></div>
      </div>
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start">
          {/* 左侧：CTA内容 */}
          <div className="order-2 lg:order-1">
            <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-black mb-4 sm:mb-6 leading-tight">
              准备好开启
              <br />
              <span className="text-blue-600">数字化增长</span>
              <br />
              了吗？
            </h2>
            
            <p className="text-base sm:text-lg lg:text-xl text-gray-300 mb-6 sm:mb-8 leading-relaxed">
              让AI智能体懂企业的业务，与蜜多云一起，构建属于您的数字营销生态体系
            </p>
            
            {/* 特色亮点 */}
            <div className="space-y-3 sm:space-y-4 mb-6 sm:mb-8">
              <div className="flex items-center space-x-3">
                <div className="w-2 h-2 bg-green-400 flex-shrink-0"></div>
                <span className="text-sm sm:text-base lg:text-lg">专业团队一对一服务</span>
              </div>
              <div className="flex items-center space-x-3">
                <div className="w-2 h-2 bg-green-400 flex-shrink-0"></div>
                <span className="text-sm sm:text-base lg:text-lg">免费提供行业分析报告</span>
              </div>
              <div className="flex items-center space-x-3">
                <div className="w-2 h-2 bg-green-400 flex-shrink-0"></div>
                <span className="text-sm sm:text-base lg:text-lg">30天免费试用期</span>
              </div>
            </div>
            
            {/* 联系方式 */}
            <div className="border-l-4 border-blue-600 pl-4 sm:pl-6">
              <h3 className="text-xl sm:text-2xl font-bold mb-3 sm:mb-4">立即联系我们</h3>
              <div className="space-y-2 text-sm sm:text-base text-gray-300">
                <p>📞 400-123-4567</p>
                <p>📧 contact@midoyun.com</p>
                <p>📍 深圳市南山区科技园</p>
              </div>
            </div>
          </div>
          
          {/* 右侧：联系表单 */}
          <div className="order-1 lg:order-2 bg-white text-black p-6 sm:p-8 border-4 border-white shadow-[8px_8px_0px_#0057FF]">
            <h3 className="text-2xl sm:text-3xl font-black mb-6">预约免费咨询</h3>
            
            <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6">
              {/* 姓名和公司 - 移动端垂直排列 */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label htmlFor="name" className="block text-sm font-bold mb-2">
                    姓名 *
                  </label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    value={formData.name}
                    onChange={handleInputChange}
                    required
                    className="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-black focus:outline-none focus:border-blue-600 text-sm sm:text-base"
                    data-cursor-text="input"
                  />
                </div>
                
                <div>
                  <label htmlFor="company" className="block text-sm font-bold mb-2">
                    公司名称 *
                  </label>
                  <input
                    type="text"
                    id="company"
                    name="company"
                    value={formData.company}
                    onChange={handleInputChange}
                    required
                    className="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-black focus:outline-none focus:border-blue-600 text-sm sm:text-base"
                    data-cursor-text="input"
                  />
                </div>
              </div>
              
              {/* 电话和邮箱 - 移动端垂直排列 */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label htmlFor="phone" className="block text-sm font-bold mb-2">
                    联系电话 *
                  </label>
                  <input
                    type="tel"
                    id="phone"
                    name="phone"
                    value={formData.phone}
                    onChange={handleInputChange}
                    required
                    className="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-black focus:outline-none focus:border-blue-600 text-sm sm:text-base"
                    data-cursor-text="input"
                  />
                </div>
                
                <div>
                  <label htmlFor="email" className="block text-sm font-bold mb-2">
                    邮箱地址
                  </label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    value={formData.email}
                    onChange={handleInputChange}
                    className="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-black focus:outline-none focus:border-blue-600 text-sm sm:text-base"
                    data-cursor-text="input"
                  />
                </div>
              </div>
              
              {/* 咨询需求 */}
              <div>
                <label htmlFor="message" className="block text-sm font-bold mb-2">
                  咨询需求
                </label>
                <textarea
                  id="message"
                  name="message"
                  value={formData.message}
                  onChange={handleInputChange}
                  rows={4}
                  className="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-black focus:outline-none focus:border-blue-600 resize-none text-sm sm:text-base"
                  placeholder="请简述您的需求..."
                  data-cursor-text="input"
                />
              </div>
              
              {/* 提交按钮 */}
              <button
                type="submit"
                className="w-full bg-blue-600 text-white px-6 sm:px-8 py-3 sm:py-4 font-bold text-base sm:text-lg border-2 border-black shadow-[4px_4px_0px_black] hover:shadow-[6px_6px_0px_black] hover:transform hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200"
                data-cursor-text="initiate"
              >
                立即预约咨询
              </button>
            </form>
            
            <p className="text-xs sm:text-sm text-gray-600 mt-4 text-center leading-relaxed">
              提交即表示同意我们的隐私政策，我们承诺保护您的个人信息
            </p>
          </div>
        </div>
      </div>
    </section>
  )
} 